<template>
	<view class="echarts-container">
		<!-- <view style="width: 100%; height: 408px;"> -->
		<l-echart ref="chartRef" @finished="init"></l-echart>
		<!-- </view> -->
	</view>
</template>

<script setup>

	// import LEchart from '@/components/l-echart/l-echart.vue'
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif
	
  const props = defineProps({
		echartOption:{
			type: Object
		},
		name:{
			type: String
		},
		activeTab:{
			type: String
		}
	})

	console.log("echarts", echarts);
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	console.log("echarts==setup", props.echartOption)
	const option = {
		legend: {
			bottom: '5px',
			right: '33%',
			// icon: 'rect',
			// itemWidth: 13,
			// itemHeight: 13, // 图例宽高
			textStyle: {
				color: '#000000',
				fontSize: 14
			}
		},
		xAxis: {
			name: '',
			type: 'category',
			data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
			// 不要刻度线
			axisTick: {
				show: false
			},
			// boundaryGap: false, // 不留白，从原点开始
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 14, //  字体大小
				fontWeight: 'normal'
				// 关键代码
				// padding: [-10, -600, -40, -50] // 标题位置调整 上 右 下 左
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		yAxis: {
			name: 'MWh',
			type: 'value',
			data: ['100', '200', '300', '400', '500', '600'],
			// 不要刻度
			axisTick: {
				show: false
			},
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 12, //  字体大小
				fontWeight: 'normal'
			},
			splitLine: {
				lineStyle: {
					type: 'solid', // y轴分割线类型
					color: '#E6E6E6',
					width: 2
				}
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		grid: {
			left: '13%'
		},
		series: [{
				name: '计划',
				data: [23, 89, 12, 41, 67, 58, 39, 77, 4, 81, 56, 33],
				type: 'line',
				smooth: true,
				// symbol: 'none', // 设置小圆点为 'none'，禁用小圆点
				lineStyle: {
					color: '#F38A64' // 设置线的颜色为黄色
				},
				color: ['#F38A64']
				// 显示每个点的数据
				// itemStyle: { normal: { label: { show: true }}}
			},
			{
				name: '实际',
				data: [23, 89, 12, 41, 67, 58, 39, 77, 4, 81, 56, 33],
				type: 'bar',
				backgroundStyle: {
					// 背景色
					color: 'linear-gradient(180deg, #6CB8FF 0%, #3797F0 100%)'
				},
				color: ['linear-gradient(180deg, #6CB8FF 0%, #3797F0 100%)'],
				itemStyle: { // 使用方法二的写法
					color: {
						type: 'linear',
						x: 0, // 右
						y: 0, // 下
						x2: 0, // 左
						y2: 1, // 上
						colorStops: [{
								offset: 0,
								color: '#6CB8FF' // 0% 处的颜色
							},
							// {
							//   offset: 0.7,
							//   color: '#2378f7' // 70% 处的颜色
							// },
							{
								offset: 1,
								color: '#3797F0' // 100% 处的颜色
							}
						]
					}
				}

			}
		],
		tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: 'axis',
			backgroundColor: 'rgba(32, 33, 36,.7)',
			borderColor: 'rgba(32, 33, 36,0.20)',
			borderWidth: 1,
			textStyle: { // 文字提示样式
				color: '#fff',
				fontSize: '12'
			}
		}
	};
	
	// const chartRef = ref < LEchartComponentPublicInstance | null > (null);
	const chartRef = ref(null);
	// console.log("名称的", name);
	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(props.echartOption);
	}
</script>

<style lang="scss" scoped>
	.echarts-container {

	}
</style>